<template>
	<div>
        <div id="colorlib-page">	
		<div id="colorlib-contact">
			<div class="container">
				<div class="row text-center">
					<h2 class="bold">Notice </h2>
				</div>
				<div class="row">
					<div class="col-md-12 col-md-offset-0">
						<div class="row">
							<div class="col-md-4 animate-box">
								<h3>My Address</h3>
								<ul class="contact-info">
									<li><span><i class="icon-map5"></i></span>88 West 21th Street, Suite 721 New York NY 10016</li>
									<li><span><i class="icon-phone4"></i></span>+ 1235 2355 98</li>
									<li><span><i class="icon-envelope2"></i></span><a href="#">info@yoursite.com</a></li>
									<li><span><i class="icon-globe3"></i></span><a href="#">www.yoursite.com</a></li>
								</ul>
							</div>
							<div class="col-md-7 col-md-push-1 animate-box">
								<div class="row">
									<form action="">
									<div class="col-md-6">
										<div class="form-group">
											<input type="text" class="form-control" placeholder="Name" v-model="m_name" required>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group">
											<input type="email" class="form-control" placeholder="Email" v-model="m_email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<textarea name="" class="form-control" id="" cols="30" rows="7" v-model="m_content" placeholder="Message" required></textarea>
										</div>
									</div>
									<div class="col-md-12">
										<div class="form-group">
											<input type="button" value="Send Message" @click="postmessage()" class="btn btn-primary btn-submit">
										</div>
									</div>
									</form>
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	
		<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-pb-sm text-center">
							<div class="row">
								<div class="col-md-10">
									<h2>Office</h2>
									<p>291 South 21th Street, <br> Suite 721 New York NY 10016</p>
								</div>
							</div>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Get in Touch</h2>
							<p><a href="#">noah@info.com</a></p>
						</div>
						<div class="col-md-4 col-pb-sm text-center">
							<h2>Social</h2>
							<p class="colorlib-social-icons">
								<a href="#"><i class="icon-facebook4"></i></a>
								<a href="#"><i class="icon-twitter3"></i></a>
								<a href="#"><i class="icon-googleplus"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
							</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<p>
								
								
							</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	
	</div>
	</div>
</template>
<script>
import {message} from '../api/index.js';
export default {
	name:'message',
	data(){
		return{
			m_name:'',
			m_email:'',
			m_content:'',
			time:Date.parse(new Date()),
		}
	},
	methods: {
		async postmessage(){
			let m_name=this.m_name;
			let m_email=this.m_email;
			let m_content=this.m_content;
			let time=this.time;
			if(!m_name || !m_email || !m_content){
				alert('留言不能为空')
			}else{
				alert('留言发送成功');
				location.href="/#/message"
				var result=await message({m_name:m_name,m_email:m_email,m_content:m_content,time:time});
			// console.log(result);
			}
			
		}
	},
	mounted(){
	}
}
</script>